import React,{useState} from 'react'
import './index.css'

export default function Item({ todo, done }) {
  //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive, setIsActive] = useState(false);

  //鼠标移入li事件函数
  const mouseEnterHandle = (e) => {
    setIsActive(true);
  }

  //鼠标移出li的事件函数
  const mouseLeaveHandle = (e) => {
    setIsActive(false);
  }
    return (
        <div>
            <li 
                onMouseEnter={mouseEnterHandle}
                onMouseLeave={mouseLeaveHandle}
                className={isActive ? "active" : ""}
            >
                <label>
                    <input type="checkbox"  checked={done}/>
                    <span>{todo}</span>
                </label>
                <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
            </li>
        </div>
    )
}
